<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="AbAlerts.aspx.cs" Inherits="AbAlerts" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <style>
        /* 主容器样式 */
        .alert-container {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            background-color: #ffffff;
            border-radius: 16px;
            box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
        }

        /* 标题样式 */
        .alert-container h2 {
            background: linear-gradient(135deg, #ff6b3a, #d63384); /* 渐变色 */
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-align: center;
            font-size: 26px;
            font-weight: bold;
            margin-bottom: 20px;
        }

        /* 表格样式 */
        .alert-table {
            width: 100%;
            border-collapse: collapse;
            background: #ffffff;
            border-radius: 12px;
            overflow: hidden;
        }

        .alert-table th {
            background: linear-gradient(90deg, #ff6b3a, #d63384); /* 表头渐变色 */
            color: #ffffff;
            padding: 15px;
            text-align: left;
            font-size: 16px;
            font-weight: bold;
        }

        .alert-table td {
            padding: 12px 15px;
            border-bottom: 1px solid #f0f0f0;
            font-size: 15px;
            color: #333;
        }

        /* 表格行悬停效果 */
        .alert-table tr:hover {
            background-color: #fafafa;
        }

        /* 状态列样式 */
        .alert-table .status {
            font-weight: bold;
            color: #d63384; /* 符合渐变色主题 */
        }

        /* 操作按钮样式 */
        .alert-table .action-button {
            background: linear-gradient(135deg, #ff6b3a, #cc4f22) !important; /* 按钮渐变色 */
            color: #ffffff !important;
            padding: 8px 20px !important;
            font-size: 14px !important;
            border: none !important;
            border-radius: 20px !important;
            cursor: pointer !important;
            transition: background-color 0.3s ease, transform 0.2s ease !important;
            font-weight: bold !important;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2) !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
        }

        .alert-table .action-button:hover {
            background: linear-gradient(135deg, #e55a26, #b8491b) !important;
            transform: scale(1.05) !important;
            box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.3) !important;
        }
        /* 已处理状态按钮样式 */
        .alert-table .action-button[disabled] {
            background-color: #cccccc;
            color: #666666;
            cursor: not-allowed;
            box-shadow: none;
            opacity: 0.7;
        }

        /* 时间列的字体样式 */
        .time {
            color: #999;
            font-size: 14px;
        }

        /* 描述列的颜色和对齐 */
        .description {
            color: #666;
        }

        /* 细节阴影效果 */
        .alert-table td {
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
            margin-bottom: 8px;
            border-radius: 8px;
        }
       /* 风险评估卡片样式 */
.risk-assessment-card {
    background-color: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    margin: 20px auto;
    text-align: center;
}

/* 标题样式 */
.risk-title {
    font-size: 20px;
    color: #333;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* 说明文字样式 */
.risk-explanation {
    font-size: 14px;
    color: #666;
    margin-bottom: 15px;
}

/* 风险等级的颜色 */
.low-risk {
    color: #28a745; /* 低风险为绿色 */
}

.medium-risk {
    color: #ffc107; /* 中风险为黄色 */
}

.high-risk {
    color: #dc3545; /* 高风险为红色 */
}

/* 进度条样式 */
.progress-bar {
    width: 100%;
    height: 20px;
    background-color: #f0f0f0;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
}

.progress {
    height: 100%;
    border-radius: 10px;
    background: linear-gradient(90deg, #ff6b3a, #ff3d71); /* 渐变颜色 */
}

/* 风险标签样式 */
.risk-level {
    font-size: 16px;
    font-weight: bold;
    color: #dc3545; /* 高风险文字颜色 */
}

/* 图标样式 */
.risk-title i {
    color: #ff3d71;
    font-size: 22px;
}

.chart-container {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
}
 /* 下载按钮美化样式 */
    .download-button {
        padding: 8px 15px;
        background-color: #ff6b3a; /* 按钮颜色 */
        color: white;
        border: none;
        border-radius: 5px;
        font-size: 14px;
        font-weight: bold;
        cursor: pointer;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        transition: background-color 0.3s, transform 0.2s;
    }

    .download-button:hover {
        background-color: #e55a26;
        transform: scale(1.05);
    }

    .download-button:active {
        transform: scale(0.95);
    }
    .typebtn{
         padding: 8px 15px;
 background-color: #ff6b3a; /* 按钮颜色 */
 color: white;
 border: none;
 border-radius: 5px;
 font-size: 14px;
 font-weight: bold;
 cursor: pointer;
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 transition: background-color 0.3s, transform 0.2s;
    }
</style>


</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
      <div class="alert-container">
        <h2>异常警报</h2>

        <asp:GridView ID="AlertGridView" runat="server" AutoGenerateColumns="False" CssClass="alert-table">
            <Columns>
                <asp:BoundField DataField="警报类型" HeaderText="警报类型" />
                <asp:BoundField DataField="描述" HeaderText="描述" />
                <asp:BoundField DataField="时间" HeaderText="时间" DataFormatString="{0:yyyy-MM-dd HH:mm}" />
                <asp:BoundField DataField="状态" HeaderText="状态" />
                <asp:TemplateField HeaderText="操作">
                    <ItemTemplate>
                       <asp:Button ID="HandleButton" runat="server" Text="标记为已处理" CssClass="action-button" 
                           OnClick="HandleButton_Click" CommandArgument='<%# Eval("警报id") %>' 
                           Visible='<%# Eval("状态").ToString() == "待处理" %>' />

                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </div>

           
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">

   <div class="risk-assessment-card">
    <h3 class="risk-title">
        <i class="fas fa-exclamation-triangle"></i> 风险等级评估
    </h3>
    <p class="risk-explanation">
        风险等级说明：<br>
        <span class="low-risk">0-2次异常为低风险</span>，
        <span class="medium-risk">3-5次为中风险</span>，
        <span class="high-risk">6次及以上为高风险</span>
    </p>
    <div class="progress-bar">
        <div class="progress" id="riskProgress" style="width: 80%;"></div>
    </div>
    <span id="riskLabel" class="risk-level">高风险</span>
</div>
                <asp:Panel ID="Panel1" runat="server" CssClass="pan">
            <div style="background-color: white;">
                <asp:TextBox ID="typetxt" runat="server" TextMode="MultiLine" Width="670px" Height="500px" ReadOnly="True"></asp:TextBox>

            </div>
        </asp:Panel>

    
<asp:Button ID="typebtn" runat="server" Text="健康知识" CssClass="typebtn" OnClick="typebtn_Click" />


 <div class="chart-container" style="width: 100%; height: 420px; position: relative; padding: 20px; background-color: #ffffff; border-radius: 12px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
        <h3 style="margin: 0; font-size: 18px; color: #333;">警报趋势图</h3>
        <button class="download-button" onclick="downloadChart()">下载图表</button>
    </div>
    <canvas id="alertTrendChart" style="margin-top: 10px;"></canvas>
</div>

<script>
    function downloadChart() {
        const link = document.createElement('a');
        link.href = document.getElementById('alertTrendChart').toDataURL();
        link.download = 'alert-trend-chart.png';
        link.click();
    }
</script>



   <!-- HTML中引入Chart.js-->
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.1"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.0"></script>








    <script>
        // 在JavaScript中初始化和配置图表
        document.addEventListener("DOMContentLoaded", function () {
            var ctx = document.getElementById('alertTrendChart').getContext('2d');

            var chart = new Chart(ctx, {
                type: 'line',  // 使用折线图
                data: {
                    labels: alertTrendData.map(data => data.日期),
                    datasets: [{
                        label: '警报数量',
                        data: alertTrendData.map(data => data.警报数量),
                        borderColor: 'rgba(255, 99, 132, 1)',
                        backgroundColor: 'rgba(255, 99, 132, 0.2)',
                        borderWidth: 2,
                        fill: true,
                        tension: 0.3,  // 平滑曲线效果
                        pointBackgroundColor: 'rgba(255, 99, 132, 1)',  // 数据点颜色
                        pointRadius: 5,  // 数据点大小
                        pointHoverRadius: 8,  // 悬停数据点的大小
                        pointHoverBackgroundColor: 'rgba(255, 99, 132, 0.8)'  // 悬停数据点颜色
                    }]
                },
                options: {
                    plugins: {
                        tooltip: {
                            enabled: true,
                            callbacks: {
                                label: function (context) {
                                    // 定制tooltip内容
                                    return `日期: ${context.label}, 数量: ${context.raw}`;
                                }
                            }
                        },
                        legend: {
                            display: true,
                            position: 'top',  // 图例位置
                            labels: {
                                color: '#333',  // 图例文本颜色
                                font: {
                                    size: 14
                                }
                            }
                        }
                    },
                    scales: {
                        x: {
                            type: 'time',
                            time: {
                                unit: 'day',
                                displayFormats: {
                                    day: 'MM-DD'
                                }
                            },
                            title: {
                                display: true,
                                text: '日期',
                                color: '#666'
                            }
                        },
                        y: {
                            beginAtZero: true,
                            title: {
                                display: true,
                                text: '警报数量',
                                color: '#666'
                            },
                            grid: {
                                color: 'rgba(200, 200, 200, 0.3)',  // 网格线颜色
                                borderDash: [3, 3]  // 网格虚线效果
                            }
                        }
                    }
                }
            });
        });

    </script>



</asp:Content>

